<template>
  <div id="apa">
    <el-breadcrumb separator="/" >
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>

    </el-breadcrumb>
    <el-row :gutter="20" class="pay">
      <el-col :span="6">会员购</el-col>
      <el-col :span="6">金额</el-col>
      <el-col :span="6" v-model="moeny">9999</el-col>
      <el-col :span="6">
        <el-button type="success" @click="gotoPay">支付</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        moeny: '9999',
        payurl: ''
      }
    },
    methods: {
      async logs() {
        await this.$http.get(`/nono/pay/alipay/logs`,{
          headers: {
            "Authorization": "Bearer " +
              localStorage.getItem("accessToken")
          }
        })
      },
      async gotoPay() {
        if (localStorage.getItem("accessToken") == null) {
          this.$message.error("请先登录")
          this.$router.plus("/login")
        }

        let result = await this.$http.get(`/nono/pay/alipay/payOrder/${this.moeny}`, {
          headers: {
            "Authorization": "Bearer " +
              localStorage.getItem("accessToken")
          }
        })
        let data = result.data
        console.log(data)
        if (data.status != 200)
          return this.$message.error("订单异常请稍后重试")
        this.payurl = data.data
        self.location.href = this.payurl;
      }
    },
    mounted() {
      this.logs()
    }

  }
</script>

<style>
  
  #apa {
    background-color: #0077AA;
  }

  .pay {
    margin-top: 200px;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
